<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href="css/main1.css">
		<title>Document</title>
		<script type="text/javascript">
			/*
											        请写出代码，实现：
											        1、点击“弹出弹框按钮”显示弹框
													2、弹框显示后，实现秒数的倒计时，秒数为0时自动隐藏弹框
													3、倒计时过程中点击“X”按钮可以隐藏弹框

											        */
			window.onload = function() {
				var oBtn01 = document.getElementById("btn01")
				// 拿到盒子
				var oPop = document.getElementById("pop")
				// 关闭对话框
				var oShutoff = document.getElementById("shutoff")
				// 计数器
				var oCount = document.getElementById("count")
				var time = null;
				oBtn01.onclick = function() {
					// 让盒子展示给用户
					oPop.style.display = 'block'
					// 设置定时器，每隔一秒钟，调用定时任务
					time = setInterval(function() {
						// 计数器递减
						oCount.innerHTML--
							// 判断，如果当前的计数器等于0点时候，就关闭对话框
							if(oCount.innerHTML == 0) {
								oPop.style.display = 'none'
								oCount.innerHTML = 5
								// 关闭定时器
								clearInterval(time)
							}
					}, 1000)

				}
				oShutoff.onclick = function() {
					// 让盒子隐藏
					oPop.style.display = 'none'
					oCount.innerHTML = 5
					// 关闭定时器
					clearInterval(time)
				}
			}
		</script>
	</head>

	<body>
		<input type="button" value="弹出弹框" id="btn01">
		<div class="pop_main" id="pop">
			<div class="pop_con">
				<div class="pop_title">
					<h3>系统提示</h3>
					<a href="#" id="shutoff">×</a>
				</div>
				<div class="pop_detail">
					<p class="pop_text">亲！请关注近期的优惠活动！</p>
				</div>
				<div class="pop_footer">
					还有<span id="count">5</span>秒自动关闭弹框
				</div>
			</div>
			<div class="mask"></div>
		</div>
	</body>

</html>